import $ from './library/jquery.js';

// 数据传输
$.ajax({
    type:"get",
    url:"../interface/getData.php", //相对于html的路径，而不是这个js文件的路径。
    dataType:"json",
    success:function(res){
        // console.log(res);
        
        let count =1;
        let temp ='';
        res.forEach((elm,i)=>{
            let picture =JSON.parse(elm.picture);  //将数据库中picture属性里的json字符串转为数组

            // console.log(picture);
            temp += `<a href="./xiangqing.html?id=${elm.id}" class="kuai">
            <img src="./${picture[0].src}" alt="" />
            <p class="p1">${elm.title}</p>
            <p class="p2">陪伴美好时光</p>
            <p class="p3">
              <span class="span1">${elm.price}</span>
              <span class="span2">999元</span>
            </p>
          </a>`;
        });
        $('.jiadian_c').prepend(temp);
    }

}); 
 

// nav 下拉菜单
    let xiala=$("#xiala>li");
    let caidan=$(".menu_n");

    $('.nav').on('mouseenter','#xiala>li',function(){
        let index=$(this).index();
        
        let timer=setTimeout(function(){
            $('.menu_nav').show();
            caidan.eq(-index+8).slideDown(200,"linear");
            xiala.on('mouseenter',function(){
                let index=$(this).index();
                let index2=-index+8;
                caidan.eq(index2).show().siblings().hide();
            });
        }, 200);
        
        $('.nav').on('mouseleave',function(){
            clearTimeout(timer);
            caidan.slideUp(200,"linear");
            $('.menu_nav').hide();
        });
    });

    
// banner 右拉菜单
$('.banner li').on('mouseenter',function(){
    $('.menu_banner').show();
    let index= $(this).index();
    $('.menu_banner>.menu_c').eq(index).show();

    $('.banner li').on('mouseenter',function(){
        let index= $(this).index();
        $('.menu_banner>.menu_c').eq(index).show().siblings().hide();
    })

    $('.banner').on('mouseleave',function(){
        $('.menu_banner').hide();
    })
})


// 轮播图

let speed=500; // 动画执行时间
let delay=3000; // 图片停留时间


let sliderElm=$('#banner_bg');
let arrow_l=$('.arrow_l');
let arrow_r=$('.arrow_r');
let circle=$('#circle');
let distant=0; 
let timer;
let left=0;

let start=function(){
    if(distant<=(-4904)){
        distant=0;
        sliderElm.attr("style","left:0px;");
    }
    distant-=1226;
    // console.log(distant);
    sliderElm.animate({
        left:distant
    },
    delay,
    function(){
        left=Math.ceil(sliderElm.position().left);
        if(left<=(-4902)){
            distant=0;
            sliderElm.attr("style","left:0px;");
        }
    });
}.bind(this);

let stop=function(){
    clearTimeout(timer);
    sliderElm.stop(true, true);
}

timer=setInterval(function(){
    start();
    // console.log(left);
},3500);
$('#banner_bg').hover(
    function(){
        stop();
        
    },
    function(){
        timer = setInterval(start.bind(null, 1), 3500);
    }
);
arrow_r.on('click',function () {
    if(left==0){
        left=Math.ceil(sliderElm.position().left-1226);
        console.log(left);
        sliderElm.css('left','-1226px');
        distant=-1226;
    }
    else if(left==(-1226)){
        left=Math.ceil(sliderElm.position().left-1226);
        console.log(left);
        sliderElm.css('left','-2452px');
        distant=-2452;
    }
    else if(left==(-2452)){
        left=Math.ceil(sliderElm.position().left-1226);
        console.log(left);
        sliderElm.css('left','-3678px');
        distant=-3678;
    }
    else if(left==(-3678)){
        left=Math.ceil(sliderElm.position().left-1226);
        console.log(left);
        sliderElm.css('left','-4904px');
        distant=-4904;
    }
    else if(left==(-4903)||left==(-4904)){
        left=-1226;
        console.log(left);
        sliderElm.css('left','-1226px');
        distant=-2452;
    }
    stop();
    timer = setInterval(start.bind(null, 1), 3500);
    
})

arrow_l.on('click',function () {
    if(left==0){
        left=-3678;
        console.log(left);
        sliderElm.css('left','-3678px');
        distant=0;
    }
    else if(left==(-1226)){
        left=0;
        console.log(left);
        sliderElm.css('left','0px');
        distant=-1226;
    }
    else if(left==(-2452)){
        left=-1226;
        console.log(left);
        sliderElm.css('left','-1226px');
        distant=-2452;
    }
    else if(left==(-3678)){
        left=-2452;
        console.log(left);
        sliderElm.css('left','-2452px');
        distant=-3678;
    }
    else if(left==(-4903)||left==(-4904)){
        left=-3678;
        console.log(left);
        sliderElm.css('left','-3678px');
        distant=-4904;
    }
    stop();
    timer = setInterval(start.bind(null, 1), 3500);
    
})

circle.on('click','div',function(){
    stop();
    let index=$(this).index();
    // alert(index);
    sliderElm.css('left',index*(-1226)+'px');
    timer = setInterval(start.bind(null, 1), 3500);
})
// arrow_r.on('mouseover',function () {
//     timer = setInterval(start.bind(null, 1), 3500);
// })





